<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>牛逼的网页</title>
	<style type="text/css">
		*{margin: 0;padding: 0;}
		#div{width: 300px;height: 300px;margin: 0 auto;}
	</style>
</head>
<body>
	<div id="div"></div>
	<center>
	<img src="./222639.jpg" id="img" alt="">
	</center>
	<script type="text/javascript">
	//获取元素
	var img = document.getElementById('img');
	var div = document.getElementById('div');

	//定义全局变量
	var init = '';
	var i = 0;

	//鼠标放上去样式
	img.onmouseover = function(){
		img.style.cursor = 'pointer';
	}
	//鼠标单击事件
	img.onclick = function(){
		img.style.display = 'none';
		div.style.color = 'red';
		//定义字符串
		var str = '啊多少分为二反复考虑,收年费俺宿舍电费胜多负少东方闪电发送非我人的身份,是打发啊非我as非试点非是,服务费 水电费';

		init = setInterval(function(){
			if(str[i] == ','){
				div.innerHTML += str[i]+'<br>';
			}else{
				div.innerHTML += str[i];
			}
			i++;
			if(i == str.length){
				clearInterval(init);
			}
		},300);
			



	}
	</script>
</body>
</html>